<template>
	<view class="content">
		<view class="padding-about-30 padding-top-01">
			<view class="view margin-top-20 font-size-26">
				<view  style="padding: 30rpx 0;" class="display-flex align-items">
					<view class="">
						编号
					</view>
					<view class="file-1 text-right">
						{{form.code.card_num || '请输入自己库存的卡片编号'}}
					</view>
					<!-- <input v-model="form.code" class="file-1 font-size-26 text-right" type="text"
						placeholder="" /> -->
				</view>
				<uv-gap height="1" bgColor="#F5F5F5"></uv-gap>
				<view style="padding: 30rpx 0;" class="display-flex align-items">
					<view class="">
						新卡号码
					</view>
					<input v-model="form.phone" disabled class="file-1 font-size-26 text-right" type="number"
						placeholder="请输入新卡电话号码" />
				</view>
				<uv-gap height="1" bgColor="#F5F5F5"></uv-gap>
				<view style="padding: 30rpx 0;" class="display-flex align-items">
					<view class="">
						办卡人姓名
					</view>
					<input v-model="form.name" disabled class="file-1 font-size-26 text-right" type="text"
						placeholder="请输入办卡人姓名" />
				</view>
				<uv-gap height="1" bgColor="#F5F5F5"></uv-gap>
				<view style="padding: 30rpx 0;" class="display-flex align-items">
					<view class="">
						身份证号
					</view>
					<input v-model="form.ID" disabled class="file-1 font-size-26 text-right" type="text"
						placeholder="请输入办卡人身份证号" />
				</view>
				<uv-gap height="1" bgColor="#F5F5F5"></uv-gap>
				<view style="padding: 30rpx 0;" class="display-flex align-items">
					<view class="">
						紧急联系电话
					</view>
					<input v-model="form.contact" disabled maxlength="11" class="file-1 font-size-26 text-right" type="number"
						placeholder="请输入办卡人紧急联系电话" />
				</view>
				<uv-gap height="1" bgColor="#F5F5F5"></uv-gap>
				<view style="padding: 30rpx 0;" class="display-flex align-items">
					<view class="">
						日期
					</view>
					<view class="text-right file-1">
						{{timestampToDate(Date.now(),'Y-m-d')}}
					</view>
				</view>
				<uv-gap height="1" bgColor="#F5F5F5"></uv-gap>
				<view style="padding: 30rpx 0;" class="display-flex align-items">
					<view class="">
						操作人
					</view>
					<!-- <input class="file-1 font-size-26 text-right" type="text" placeholder="金水路营业厅" /> -->
					<view class=" file-1 text-right" style="color: #2671CE;">
						{{local.get('userinfo').nickname}}
					</view>
				</view>
				<view style="padding: 30rpx 0;">
					备注
				</view>
				<view class="display-flex textarea center align-items">
					<textarea name="" disabled v-model="form.notes" id="" cols="30" style="width: 95%;height: 95%;"
						class="font-size-26" placeholder="请输入" rows="10"></textarea>
				</view>
				<uv-gap height="1" bgColor="#F5F5F5"></uv-gap>
				<view style="padding: 30rpx 0;">
					承诺书
				</view>
				<view v-for="item,index in imageList" :key="index" class="">
					<view style="width: 638rpx;height: 262rpx;border-radius: 20rpx;margin-bottom: 20rpx;"
						class="position-relative">
						<image :src="item.fullurl"
							style="width: 638rpx;height: 262rpx;border-radius: 20rpx;margin-bottom: 20rpx;"
							mode="aspectFill"></image>
						<!-- <view @click="delimage(index)" class="position-absolute border-radius"
							style="background: #FFFFFF; top: -14rpx;right:-14rpx;">
							<uv-icon name="close-circle-fill" color="red" size="28"></uv-icon>
						</view> -->
					</view>
				</view>
				<!-- <view v-if="imageList.length<3" @click="chooseImage" class="display-flex textarea center align-items">
					<image src="/static/sc.png" style="width: 122rpx;height: 122rpx;" mode=""></image>
				</view>
				<view class="font-size-20 margin-top-30" style="color: #FD5A5A;">
					最多上传三张! <br />请注意上传图片的清晰避免影响后期审核!
				</view>
				<view class=" margin-top-30 display-flex space-between">
					<view @click="open_card(0)" style="background: #2671CE;" class="button">
						保存草稿
					</view>
					<view @click="open_card(2)" style="background: #FF7700;" class="button">
						提交开卡审核
					</view>
				</view> -->
				<view class="margin-top-20">

				</view>
			</view>
			<!-- <image @click="navigateTo('/pages/show/drafts')" src="/static/cg.png" class="position-fixed"
				style="bottom: 10%; right: 30rpx; width: 80rpx;height: 80rpx;" mode=""></image> -->
			<view class="kong">

			</view>
		</view>
		<uv-popup mode="bottom" round="10" ref="popup">
			<view style="max-height: 80vh;background: #F5F5F5;overflow: scroll;">
				<uv-sticky offset-top="-44">
					<view style="background: #FFFFFF; padding: 20rpx;">
						<uv-search placeholder="请输入搜索内容" @change="changeInput" v-model="keyword"></uv-search>
					</view>
				</uv-sticky>
				<view v-for="item,index in cartList" :key="index" @click="popup.close(),form.code = item"
					class="margin-top-20" style="padding: 20rpx;background: #FFFFFF;font-size: 26rpx;">
					<view class="display-flex align-items">
						<view style="width: 100rpx;">
							ID
						</view>
						<view class="">
							{{item.id}}
						</view>
					</view>
					<view class="display-flex align-items">
						<view style="width: 100rpx;">
							卡编号
						</view>
						<view class="">
							{{item.card_num}}
						</view>
					</view>
				</view>
				<div class="kong"></div>
			</view>
		</uv-popup>
		<view class="position-absolute" style="top: 5%;right: 7%;">
			<image v-if="info.status == 1" src="/static/tongg.png" style="width: 200rpx;height: 169rpx;" mode=""></image>
			<image v-if="info.status == 2" src="/static/shenhe.png" style="width: 200rpx;height: 169rpx;" mode=""></image>
			<image v-if="info.status == 3" src="/static/jujue.png" style="width: 200rpx;height: 169rpx;" mode=""></image>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		nativeUI,
		navigateTo,
		navigateBack,
		timestampToDate
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	import {
		date,
		image
	} from '@climblee/uv-ui/libs/function/test';
	const popup = ref(null)
	const keyword = ref('')
	const form = ref({
		code: {
			card_num: ''
		},
		phone: '',
		name: '',
		ID: '',
		contact: '',
		operator: '',
		notes: '',
		commitment: ''
	})
	const cartList = ref([])
	const imageList = ref([])
	const id = ref('')
	const info = ref({})
	onLoad(function(option) {
		card_list()
		id.value = option.id
		open_card_log_msg(option.id)
	});
	onShow(function() {});

	function delimage(index) {
		console.log(1);
		imageList.value.splice(index, 1)
	}
	async function open_card_log_msg(id) {
		const {
			code,
			data
		} = await api.open_card_log_msg({
			id
		})
		if (code == 1) {
			info.value = data
			form.value.code.card_num = data.card_num
			form.value.phone = data.mobile
			form.value.contact = data.other_mobile
			form.value.ID = data.name_card_num
			form.value.notes = data.msg
			form.value.name = data.name
			console.log(data.images);
			data.images.split(',').map(item => imageList.value.push({
				fullurl: item
			}))

			// card_num: ,
			// mobile: form.value.phone,
			// other_mobile: form.value.contact,
			// name: form.value.name,
			// name_card_num: form.value.ID,
			// images: imageList.value.map(item => item.fullurl).toString(),
			// createtime: Date.now(),
			// msg: form.value.notes,
		}
	}
	async function open_card(status) {
		let object = {
			id:id.value,
			card_num: form.value.code.card_num,
			mobile: form.value.phone,
			other_mobile: form.value.contact,
			name: form.value.name,
			name_card_num: form.value.ID,
			images: imageList.value.map(item => item.fullurl).toString(),
			createtime: Date.now(),
			msg: form.value.notes,
			status,
		}
		console.log(object);
		const {
			code,
			msg
		} = await api.open_card(object)
		if (code == 1) {
			nativeUI(msg)
		}
	}
	async function card_list() {
		const {
			code,
			data
		} = await api.card_list({
			limit: '9999',
			page: '1',
			card_num: keyword.value,
			status: 0
		})
		if (code == 1) {
			cartList.value =  data.list.data
		}
	}

	function changeInput() {
		console.log(1);
		card_list()
	}
	/**
	 * 修改头像
	 */
	async function chooseImage() {
		const {
			errMsg,
			tempFilePaths,
			tempFiles
		} = await uni.chooseImage({
			count: 3, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		})
		console.log(tempFilePaths);
		if (errMsg == 'chooseImage:ok') {
			for (var i = 0; i < tempFilePaths.length; i++) {
				uploadFilePromise(tempFilePaths[i])
			}

		}
	}
	/**
	 * @param {Object} url上传  路径
	 * 上传头像
	 */
	async function uploadFilePromise(url) {
		const {
			code,
			data
		} = await api.uploadFilePromise(url)
		if (code == 1) {
			imageList.value.push(data)
			// userinfo.value.avatar = id
			// userinfo.value.avatar_url = path
		}
	}
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">
	.button {
		width: 289rpx;
		height: 80rpx;
		color: #FFFFFF;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
	}

	.textarea {
		width: 638rpx;
		height: 262rpx;
		background: #F8F8F7;
		border-radius: 10rpx;
	}

	.view {
		padding: 15rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
</style>